<template>
  <div class="app-container pg-product-list">
    <!-- top-search begin -->
    <div ref="topSearch" class="top-search top-more-search" v-show="showSearch">
      <el-form
        inline
        ref="searchForm"
        label-width="0"
        class="search-form"
        :class="{ 'show-more': showFormMore }"
        :model="searchForm">
        <el-form-item prop="warehouse">
          <el-input
            v-model="searchForm.warehouse"
            clearable
            placeholder="请输入仓库名称"
            @keyup.enter.native="search()"></el-input>
        </el-form-item>
        <el-form-item prop="alOrderInput">
          <el-input v-model="searchForm.alOrderInput" placeholder="多单号用逗号‘，’隔开" clearable @keyup.enter.native="search()">
            <el-select class="w-85" v-model="searchForm.alOrderType" slot="prepend" placeholder="请选择" @change="search()">
              <el-option label="阿里单号" value="alOrder"></el-option>
              <el-option label="运单号" value="logisticsOrder"></el-option>
              <el-option label="订单号" value="orderNo"></el-option>
              <el-option label="物流单号" value="referenceNo"></el-option>
              <el-option label="主单号" value="carrierBillNo"></el-option>
              <el-option label="箱号" value="carrierBoxNo"> </el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item prop="isWeighted">
          <dg-dict-select
            dictType="yes_no"
            v-model="searchForm.isWeighted"
            clearable
            placeholder="是否核重"
            @change="search()" />
        </el-form-item>
        <el-form-item prop="confirmStatus">
          <el-select v-model="searchForm.confirmStatus" placeholder="修改待确认" clearable @change="search()">
            <el-option label="待确认" value="1"></el-option>
            <el-option label="已确认" value="0"></el-option>
          </el-select>
        </el-form-item>
        <div class="search-more-item" v-show="isBigWindow || showFormMore">
          <el-form-item prop="pushExpense">
            <dg-dict-select
              dictType="yes_no"
              v-model="searchForm.pushExpense"
              clearable
              placeholder="是否推费"
              @change="search()" />
          </el-form-item>
        </div>
        <div class="search-more-item" v-show="showFormMore">
          <el-form-item prop="paymentStatus">
            <el-select v-model="searchForm.paymentStatus" placeholder="是否支付" clearable @change="search()">
              <el-option label="已支付" value="1"></el-option>
              <el-option label="未支付" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="trackStatus">
            <dg-dict-select
              dictType="ali_order_type"
              v-model="searchForm.trackStatus"
              clearable
              placeholder="跟踪状态"
              @change="search()" />
          </el-form-item>
          <el-form-item prop="transportProduct">
            <el-select v-model="searchForm.transportProduct" placeholder="运输产品" clearable @change="search()">
              <el-option label="产品1" value="1"></el-option>
              <el-option label="产品2" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="receiverInput">
            <el-input v-model="searchForm.receiverInput" placeholder="请输入" clearable @keyup.enter.native="search()">
              <el-select class="w-85" v-model="searchForm.receiverType" slot="prepend">
                <el-option label="收件国家" value="consigneeCountryName"></el-option>
                <el-option label="收件邮编" value="consigneePostalCode"></el-option>
                <el-option label="收件城市" value="consigneeCity"></el-option>
                <el-option label="收件人" value="consigneeName1"></el-option>
                <el-option label="收件电话" value="consignorMobile"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
          <el-form-item prop="hasWorkOrder">
            <dg-dict-select
              dictType="yes_no"
              v-model="searchForm.hasWorkOrder"
              clearable
              placeholder="是否有工单"
              @change="search()" />
          </el-form-item>
          <el-form-item prop="dateRange">
            <el-date-picker v-model="searchForm.dateRange" type="daterange" unlink-panels range-separator="-"
              start-placeholder="下单开始日期" end-placeholder="下单截止日期" value-format="yyyy-MM-dd HH:mm:ss" clearable
              :picker-options="pickerOptions" :default-time="['00:00:00', '23:59:59']" @change="search()">
            </el-date-picker>
          </el-form-item>
        </div>
        <el-form-item class="search-btn-part">
          <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery()">重置</el-button>
          <el-button class="more-btn" type="text" @click="searchShowMore()">{{ !showFormMore ? '更多搜索' : '收起'
          }}<span class="ml5" :class="`el-icon-arrow-${!showFormMore ? 'down' : 'up'}`"></span></el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- top-search end -->
    <!-- right-toolbar begin -->
    <right-toolbar ref="rightToolbar" :showSearch.sync="showSearch" @queryTable="search()">
      <template v-slot:operaBar>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleShow()">新增</el-button>
        <el-button
          plain
          type="danger"
          icon="el-icon-delete"
          @click="handleShow()">删除</el-button>
        <el-button
          plain
          type="warning"
          icon="el-icon-download"
          @click="handleShow()">导出</el-button>
      </template>
    </right-toolbar>
    <!-- right-toolbar end -->
    <!-- table begin -->
    <el-table ref="pageTable" class="page-table mt10" :data="tableData" border stripe>
      <el-table-column type="selection" width="32" fixed></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="产品编码"
        prop="prodCode"
        min-width="106"
        sortable>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="prodName"
        label="产品名称"
        min-width="156">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="产品类型"
        prop="prodType"
        min-width="96">
        <template slot-scope="scope">
          <span>{{ scope.row.prodType | filterDict(dict.type['prod_channel_type']) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="计费类型"
        prop="weightType"
        min-width="106">
        <template slot-scope="scope">
          <span>{{ scope.row.weightType | filterDict(dict.type['weight_type']) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="计泡系数"
        prop="volumeCoefficient"
        min-width="88">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="下家名称"
        prop="carrierAbbName"
        min-width="128">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="渠道名称"
        prop="channelAbbName"
        min-width="128">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="对接平台"
        prop="carrierPlatform"
        min-width="118">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="分配仓库"
        prop="warehouses"
        min-width="128">
      </el-table-column>
      <el-table-column label="创建信息" min-width="172">
        <template slot-scope="scope">
          <div><span class="color-999">创建人：</span>{{ scope.row.createBy }}</div>
          <div><span class="color-999">时间：</span>{{ scope.row.createTime }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="60"
        fixed="right">
        <template slot-scope="scope">
          <div class="opera-row">
            <el-tooltip content="编辑" placement="top">
              <el-button class="opera-item icon-opera-item" type="text" icon="el-icon-edit-outline" @click="handleShow(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="复制" placement="top">
              <el-button class="opera-item icon-opera-item" type="text" icon="el-icon-copy" @click="handleCopy(scope.row)"></el-button>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- table begin -->
    <!-- page-pagination begin -->
    <pagination
      class="page-pagination"
      :total="total"
      :page-size="pageSize"
      :page-index="pageIndex"
      @change="pageChange">
    </pagination>
    <!-- page-pagination end -->
  </div>
</template>

<script>
import mixin from '@/utils/filtermixin/mixin';
import listmixin from '@/utils/list-mixin';
import * as API_Product from '@/api/archives/product';

export default {
  name: 'pg-product-list',
  dicts: ['prod_channel_type', 'weight_type'],
  mixins: [mixin, listmixin],
  data () {
    return {
      searchForm: {
        orderType: 0, // 大市场订单
        warehouse: undefined,
        alOrderType: 'alOrder',
        alOrderInput: undefined,
        isWeighted: undefined,
        confirmStatus: undefined,
        pushExpense: undefined,
        paymentStatus: undefined,
        trackStatus: undefined,
        transportProduct: undefined,
        receiverType: 'consigneeCountryName',
        receiverInput: undefined,
        hasWorkOrder: undefined,
        dateRange: undefined
      },
      tableData: [],
      // 获取row的key值
      getRowKeys (row) {
        return row.id;
      },
      selectIds: [],
      selectRows: [],

      // 分页属性
      total: 0, // 记录总条数
      pageSize: 20, // 每页显示条数
      pageIndex: 1 // 当前页
    };
  },
  mounted () {
    // 获取页面数据
    this.search();
  },
  methods: {
    /**
      * @date 2025/07/15
      * @author wolfMan
      * @description {页面查询}
    */
    search (_type) {
      let _params = this.MixinFilterParams(this.MixinClone(this.searchForm));
      if (_params.dateRange && _params.dateRange.length) {
        _params.startCreateTime = _params.dateRange[0];
        _params.endCreateTime = _params.dateRange[1];
      };
      delete _params.dateRange;
      if (!_params.alOrderInput) {
        delete _params.alOrderType;
      };
      if (!_params.receiverInput) {
        delete _params.receiverType;
      };
      _params.tabStatus = this.activeName;
      // 重置分页
      if (_type !== 'selectPage') {
        this.pageIndex = 1; // 重置翻页当前页
      };
      this.getPageData(_params);
      // 获取页面统计数据
      this.getPageTotal(_params);
    },
    /**
      * @date 2025/07/15
      * @author wolfMan
      * @description {获取页面数据}
    */
    getPageData (params) {
      let _params = {
        ...params,
        pageNum: this.pageIndex,
        pageSize: this.pageSize
      };
      API_Product.getListService(_params).then(response => {
        this.tableData = response.rows || [];
        this.total = response.total;
      });
    },
    /**
      * @date 2025/07/15
      * @author wolfMan
      * @description {表格行选中}
    */
    tableSelect(_row) {
      this.selectedIds = _row.map((item) => item.id);
      this.selectedRows = _row;
    }
  }
};
</script>